<template>
	<div class="content" :style="{width:imgWidth,height:imgHeight}">
	  <img :src="$imgUrl1+currentImage.url" class="img" :style="{ transform: `scale(${scale})` }" ref="imgs" />
	  <canvas ref="markCanvas" tabindex='0'></canvas>
	  <!-- <div class="routate" ref="draggableElement">
		  <div class="routateboxsetlist">
			  <div class="questionshowhidden">
				  <em>题号：</em>
				  <div class="twoinputbox">
					  <el-input v-model="includedNumbers"></el-input>
				  </div>
				  <em style="margin-left:14px;">编号：</em>
				  <div class="twoinputbox">
					  <el-input v-model="screenshotNo"></el-input>
				  </div>
			  </div>
		  </div>
		  <el-select v-model="questiontype" placeholder="请选择" @change="modeltypetab">
			  <el-option
				v-for="item in questionclassifylist"
				:key="item.id"
				:label="item.name"
				:value="item.id">
			  </el-option>
		  </el-select>
		  <el-button type="primary">{{circleselectionstatus==0?'圈选':circleselectionstatus==1?'圈选中':'取消圈选'}}</el-button>
	  </div> -->
	</div>
  </template>
  <script>
  import { mapState } from 'vuex';
  import {draw, getJudge,delDraw} from "@/utils/drawCropper"; // 矩形绘制方法
  import { get, post, del, put,dele } from '../../api/modelapi.js'
  export default {
	name: 'marks',
	props:['imageUrllist','parentData','modelarealistcavans','pagevale','drawStatus'],
	data() {
	  return {
		// imageUrl: require('../../assets/image/cardmodle.jpg'),
		scale: 1,
		markList: [
			// {
			   //  h:327,
			   //  w:618,
			   //  x:858,
			   //  y:511,
			   //  options:[
				  //   {
				  // 	  h:22,
				  // 	  w:44,
				  // 	  x:875,
				  // 	  y:518,
				  //   },
				  //   {
				  // 	  h:22,
				  // 	  w:44,
				  // 	  x:936,
				  // 	  y:518,
				  //   }
			   //  ]
			// }
		], // 标记内容数组
		isDrawing:false,
		questiontype:'',
		questionList:[
			{
				name:'主观题',
				id:7
			}
		],
		currentIndex: 0, // 当前图片索引
		currentImage:{},
		images:[],
		value:'第1张',
		questionlistbox:[
			{
				name:'题号/选项横排',
				id:'1'
			},
			{
				name:'题号/选项竖排',
				id:'2'
			},
			{
				name:'题号横排/选项竖排',
				id:'1,2'
			},
			{
				name:'题号竖排/选项横排',
				id:'2,1'
			}
		],
		questionclassifylist:[{name:'主观题',id:0}],
		includedNumbers:'',
		screenshotNo:'',
		imgWidth:'',
		imgHeight:'',
	   objinfo:{
			includedNumbers:'',
			screenshotNo:'',
			questionRulesId:'',
		},
		objpush:[],
		lastValidValue:null,
		questionnumbercon:{
				 screenshotNo:'',
				 questionRulesId:'',
				  includedNumbers: ''
		}
	  }
	},
	watch:{
		markList: function(val, oval) {
			// console.info('原始includedNumbers:', this.includedNumbers)
			// const updatedVal = val.map(item => {
			// 	// 保留原有的includedNumbers值，只有当当前item没有时才使用组件的值
			// 	const includedNum = item.templateQuestion ? item.includedNumbers : this.includedNumbers;
				
			// 	return {
			// 		...item,
			// 		templatePointType: 7,
			// 		includedNumbers: includedNum,  // 使用保留逻辑后的值
			// 		templateQuestion: {
			// 			examCourseQuestionId: 0,
			// 			height: 0,
			// 			includedNumbers: includedNum,  // 这里也使用相同的值
			// 			intervalHeight: 0,
			// 			intervalWidth: 0,
			// 			questionItems: [],
			// 			questionRulesId: this.questiontype,
			// 			questionType: 0,
			// 			screenshotNo: this.screenshotNo,
			// 			templateCuttingRegionId: 0,
			// 			width: 0,
			// 			templatePointType: 7
			// 		}
			// 	}
			// });
			
			console.info('更新后的markList:', val)
			this.$emit('updateMarkList', val);
		},
		modelarealistcavans: {
  handler(val, old) {
    const newItems = val.filter(item =>
      !this.markList.some(m =>
        m.x === item.x &&
        m.y === item.y &&
        m.w === item.w &&
        m.h === item.h
      )
    );

    // 为每个标记添加完整数据
    const updatedVal = val.map(item => {
      // 检查是否是新增标记
      const isNewItem = newItems.some(newItem =>
        newItem.x === item.x &&
        newItem.y === item.y &&
        newItem.w === item.w &&
        newItem.h === item.h
      );

      if (isNewItem) {
        // 新增标记使用当前输入的值
        return {
          ...item,
          includedNumbers: this.includedNumbers,
          templateQuestion: {
            examCourseQuestionId: 0,
            height: 0,
            includedNumbers: this.includedNumbers,
            intervalHeight: 0,
            intervalWidth: 0,
            questionItems: [],
            questionRulesId: this.questiontype,
            questionType: 0,
            screenshotNo: this.screenshotNo,
            templateCuttingRegionId: 0,
            width: 0,
            templatePointType: 7
          },
          templatePointType: 7
        };
      }

      // 已有标记保留原有值
      const existingMark = this.markList.find(m =>
        m.x === item.x &&
        m.y === item.y &&
        m.w === item.w &&
        m.h === item.h
      );

      return {
        ...item,
        includedNumbers: existingMark?.includedNumbers || item.includedNumbers || '',
        templateQuestion: {
          ...(existingMark?.templateQuestion || {}),
          includedNumbers: existingMark?.includedNumbers || item.includedNumbers || '',
          questionRulesId: existingMark?.templateQuestion?.questionRulesId || item.templateQuestion?.questionRulesId || this.questiontype,
          screenshotNo: existingMark?.templateQuestion?.screenshotNo || item.templateQuestion?.screenshotNo || this.screenshotNo,
        }
      };
    });
    this.markList = updatedVal;
    setTimeout(() => {
      this.initCanvas(2);
    }, 1000);
  },
  deep: true
},
	  pagevale(val,oval){
		  this.currentImage = this.images[val - 1]; // 更新当前图片
	  },
	  imageUrllist:{
		  handler(val,ova){
			  // //console.info(this.pagevale)
			  this.images = val
			  this.currentImage = val[this.pagevale-1]; // 初始化当前图片
		  },
		  deep:true
	  },
	  // 综合题号
	  includedNumbers(val,old){
		  if (val === this.lastValidValue) {
			this.$message({
			  message: '新值和旧值相同',
			  type: 'warning',
			});
			return; // 阻止后续操作
		  }
		  // 允许操作
		  this.isDrawing = true;
		  this.startCrop();
			  
		  // 更新上一次的有效值
		  this.lastValidValue = val;
	  },
	   screenshotNo(val,old){
		  if (val === this.lastValidValue) {
			this.$message({
			  message: '新值和旧值相同',
			  type: 'warning',
			});
			return; // 阻止后续操作
		  }
			  
		  // 允许操作
		  this.isDrawing = true;
		  this.startCrop();
			  
		  // 更新上一次的有效值
		  this.lastValidValue = val;
	  },
	  questiontype(val,old){
		  if (val === this.lastValidValue) {
			this.$message({
			  message: '新值和旧值相同',
			  type: 'warning',
			});
			return; // 阻止后续操作
		  }
			  
		  // 允许操作
		  this.isDrawing = true;
		  this.startCrop();
			  
		  // 更新上一次的有效值
		  this.lastValidValue = val;
	  },
	  drawStatus(val,old){
		if(val){
			this.$emit('modeltype',val)  
			this.isDrawing = val
			// //console.info(this.isDrawing)
			this.$emit('objbasicparameters', '');
			let cav = this.$refs.markCanvas;
			// draw(cav, this.modelarealistcavans, undefined, this.isDrawing);
			// 调用封装的绘制方法，并传入onNewRectangle回调函数
			draw(cav, this.modelarealistcavans, undefined, this.isDrawing, (newRectangle) => {
				// 处理新矩形对象
				this.handleNewRectangle(newRectangle);
			});
			} 
		}
	},
	created(){
	   
	},
	computed: {
		...mapState(['circleselectionstatus']), // 从 Vuex 中获取状态
	  },
	mounted() {
	   this.currentImage = this.imageUrllist[this.currentIndex]; // 初始化当前图片
	  this.handleImageLoad()
	   document.addEventListener('customMouseDown', (event)=>{});
	  //  this.questionlistclassify()
	},
	methods: {
	  handleImageLoad() {
		  this.initCanvas(1);
	  },
		getDraggableElement() {
			  return this.$refs.draggableElement;
			},
		//获取题型列表
		questionlistclassify(){
		   get('/questionrules/list')
			.then(res=>{
				if(res.code==200){
					this.questionclassifylist = res.data.filter(item=>item.questionType==1)
				}else{
				   this.$message.error(res.message);  
				}
			})
			// .catch(error=>{
			   //  this.$message.error(error.message); 
			// })
		},
		modeltypetab(val){
		  this.isDrawing = true;
		  this.$emit('modeltype',val)  
		  this.startCrop()
		},
		startCrop(){
			  if(this.includedNumbers==''){
				  this.$message({
					  message: '请填写题号',
					  type: 'warning'
				  });
				  return false
			  }
			  if(this.screenshotNo==''){
				  this.$message({
					  message: '请填写截图编号',
					  type: 'warning'
				  });
				  return false
			  }
			  if(this.questiontype==''&&this.questiontype!=0){
				  this.$message({
					  message: '请选择类型',
					  type: 'warning'
				  });
				  return false
			  }
			  let cav = this.$refs.markCanvas;
			  draw(cav, this.modelarealistcavans, undefined, this.isDrawing, (newRectangle) => {
				// 处理新矩形对象
				this.handleNewRectangle(newRectangle);
			});
			  return false
		},
	  /* 画布初始化 */
	  initCanvas(num) {
		let that = this
		this.$nextTick(() => {
		  // 初始化canvas宽高
		  let cav = that.$refs.markCanvas;
		  let ctx = cav.getContext('2d');
		  ctx.strokeStyle = '#295CFF'
		  cav.style.cursor = 'crosshair'
		  const img = that.$refs.imgs;
		  if(num==1){
			  img.onload = () => {
				cav.width = img.naturalWidth;
				cav.height = img.naturalHeight;
				that.imgHeight = img.naturalHeight;
				that.imgWidth= img.naturalWidth;
				let list = that.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
				// 若list长度不为0, 则显示已标记框
				if (list.length !== 0) {
					// //console.info('dddddd')
				  list.forEach(function (value, index, array) {
					  ctx.clearRect(value.x, value.y, value.w, value.h);
						// 遍历绘制所有标记框
					  ctx.beginPath();
					  ctx.strokeStyle = '#295CFF';
					  ctx.rect(value.x, value.y, value.w, value.h);
					  ctx.stroke();
					  // 添加透明背景
					  ctx.fillStyle = 'rgba(135, 206, 235, 0.2)'; // 设置背景颜色为半透明白色
					  ctx.fillRect(value.x, value.y, value.w, value.h); // 填充矩形
					  // 新增题型显示 - 统一样式
					  const typeButtonHeight = 24;
					  const padding = 20; // 文字左右padding
					  
					  // 设置文字样式
					  ctx.fillStyle = 'white';
					  ctx.font = '14px Microsoft YaHei';
					  ctx.textAlign = 'center';
					  ctx.textBaseline = 'middle';
					  
					  // 根据templatePointType显示不同内容
					  let typeText = '';
					  switch(value.templatePointType) {
						  case 1: 
							  typeText = '定位点';
							  break;
						  case 2:
							  typeText = '文字定位点';
							  break;
						  case 3:
							  typeText = '缺考标记';
							  break;
						  case 4:
							  typeText = '条形码';
							  break;
						  case 5:
							  typeText = '考号填涂';
							  break;
						  case 6:
							  typeText = '客观题';
							  break;
						  default:
							  typeText = '主观题';
					  }
					  
					  // 添加题号
					  let name = value.includedNumbers != undefined ? value.includedNumbers : '';
					  const displayText = typeText + name;
					  
					  // 计算文字宽度并添加padding
					  const textWidth = ctx.measureText(displayText).width;
					  const typeButtonWidth = textWidth + (padding * 2); // 文字宽度加上左右padding
					  
					  // 绘制文字背景 - 贴着矩形框顶部
					  ctx.fillStyle = '#295CFF';
					  ctx.fillRect(value.x, value.y - typeButtonHeight, typeButtonWidth, typeButtonHeight);
					  
					  // 绘制文字 - 调整文字垂直位置，确保居中
					  ctx.fillStyle = 'white';
					  ctx.fillText(displayText, value.x + typeButtonWidth/2, value.y - typeButtonHeight/2);
				  });		
				}
				 cav.addEventListener('click', function(event) {
					const rect = cav.getBoundingClientRect();
					const x = event.clientX - rect.left;
					const y = event.clientY - rect.top;
					that.handleCanvasClick(x, y);
				});
				// 调用封装的绘制方法
				draw(cav, list, undefined, true, (newRectangle) => {
					// 处理新矩形对象
					that.handleNewRectangle(newRectangle);
				});
			  }
		  }else{
			  cav.width = img.naturalWidth;
			  cav.height = img.naturalHeight;
			  that.imgHeight = img.naturalHeight;
			  that.imgWidth= img.naturalWidth;
			  let list = that.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
			  // 若list长度不为0, 则显示已标记框
			  if (list.length !== 0) {
				  // //console.info('dddddd')
				list.forEach(function (value, index, array) {
					ctx.clearRect(value.x, value.y, value.w, value.h);
						// 遍历绘制所有标记框
					  ctx.beginPath();
					  ctx.strokeStyle = 'blue';
					  ctx.rect(value.x, value.y, value.w, value.h);
					  ctx.stroke();
					  // 添加透明背景
					  ctx.fillStyle = 'rgba(135, 206, 235, 0.2)'; // 设置背景颜色为半透明白色
					  ctx.fillRect(value.x, value.y, value.w, value.h); // 填充矩形
					  // 新增题型显示 - 统一样式
					  const typeButtonHeight = 24;
					  const padding = 20; // 文字左右padding
					  
					  // 设置文字样式
					  ctx.fillStyle = 'white';
					  ctx.font = '14px Microsoft YaHei';
					  ctx.textAlign = 'center';
					  ctx.textBaseline = 'middle';
					  
					  // 根据templatePointType显示不同内容
					  let typeText = '';
					  switch(value.templatePointType) {
						  case 1: 
							  typeText = '定位点';
							  break;
						  case 2:
							  typeText = '文字定位点';
							  break;
						  case 3:
							  typeText = '缺考标记';
							  break;
						  case 4:
							  typeText = '条形码';
							  break;
						  case 5:
							  typeText = '考号填涂';
							  break;
						  case 6:
							  typeText = '客观题';
							  break;
						  default:
							  typeText = '主观题';
					  }
					  
					  // 添加题号
					  let name = value.includedNumbers != undefined ? value.includedNumbers : '';
					  const displayText = typeText + name;
					  
					  // 计算文字宽度并添加padding
					  const textWidth = ctx.measureText(displayText).width;
					  const typeButtonWidth = textWidth + (padding * 2); // 文字宽度加上左右padding
					  
					  // 绘制文字背景 - 贴着矩形框顶部
					  ctx.fillStyle = '#295CFF';
					  ctx.fillRect(value.x, value.y - typeButtonHeight, typeButtonWidth, typeButtonHeight);
					  
					  // 绘制文字 - 调整文字垂直位置，确保居中
					  ctx.fillStyle = 'white';
					  ctx.fillText(displayText, value.x + typeButtonWidth/2, value.y - typeButtonHeight/2);
									  
				});
			  }
			   cav.addEventListener('click', function(event) {
				  const rect = cav.getBoundingClientRect();
				  const x = event.clientX - rect.left;
				  const y = event.clientY - rect.top;
				  that.handleCanvasClick(x, y);
			  });
			  // 调用封装的绘制方法
			  draw(cav, list, undefined, true, (newRectangle) => {
					// 处理新矩形对象
					that.handleNewRectangle(newRectangle);
				});
		  }
		 
		})
  
	  },
	  handleNewRectangle(newRectangle) {
		this.$emit('newRectangle', newRectangle);
	},
	  // 计算按钮位置
	  getButtonPositions(mark) {
		  const buttonWidth = 60;
		  const buttonHeight = 20;
		  const buttonMargin = 5;
		  
		  const editButtonX = mark.x + mark.w - buttonWidth - buttonMargin;
		  const editButtonY = mark.y + mark.h + buttonMargin;
		  const deleteButtonX = editButtonX - buttonWidth - buttonMargin;
		  const deleteButtonY = editButtonY;
		  
		  return {
			  edit: {
				  x: editButtonX,
				  y: editButtonY,
				  width: buttonWidth,
				  height: buttonHeight
			  },
			  delete: {
				  x: deleteButtonX,
				  y: deleteButtonY,
				  width: buttonWidth,
				  height: buttonHeight
			  }
		  };
	  },
	  
	  // 检查点击是否在按钮区域内
	  isClickInButton(x, y, button) {
		  return x > button.x && 
				 x < button.x + button.width && 
				 y > button.y && 
				 y < button.y + button.height;
	  },
	  
	  // 处理画布点击
	  handleCanvasClick(x, y) {
		// 检查点击时间间隔
		const now = Date.now();
		if (now - this.lastClickTime < this.clickDelay) {
		  return;
		}
		this.lastClickTime = now;
		
		if (this.isProcessing) return;
		
		let list = this.markList;
		let handled = false;
		
		list.some((mark, index) => {
		  if (handled) return true;
		  
		  const buttons = this.getButtonPositions(mark);
		  
		  if (this.isClickInButton(x, y, buttons.edit)) {
			handled = true;
			this.handleEdit(mark);
			return true;
		  }
		  
		  if (this.isClickInButton(x, y, buttons.delete)) {
			handled = true;
			this.handleMarkDelete(mark, index);
			return true;
		  }
		  
		  return false;
		});
	  },
	  
	  // 处理编辑
	  handleEdit(mark) {
		// 防止重复处理
		if (this.isProcessing) return;
		
		try {
		  this.isProcessing = true;
		  let obj = {ishow:true}
		  const mergedObj = Object.assign({}, obj, mark);
		  console.info('mark', mergedObj);
		  this.$emit('editContent',mergedObj)
		  //console.info('编辑按钮被点击', mark); // 添加mark信息以便调试
		  // 这里添加你的编辑逻辑
		} finally {
		  this.isProcessing = false;
		}
	  },
	  
	  // 处理删除
	  async handleMarkDelete(mark, index) {
		  try {
			  this.isProcessing = true;
			  
			  if (mark.id) {
				  // 删除服务器数据
				  await this.deleteFromServer(mark.id);
			  } else {
				  // 删除本地数据
				  this.deleteLocal(index);
			  }
		  } finally {
			  this.isProcessing = false;
		  }
	  },
	  
	  // 从服务器删除
	  async deleteFromServer(id) {
		  try {
			  const res = await dele('/template/cuttingregion/delete', 
				  { id },
				  {
					  headers: {
						  'Content-Type': 'x-www-form-urlencoded',
					  }
				  }
			  );
			  
			  if (res.code === 200) {
				  this.$message.success('删除成功');
				  this.$emit('refreshdata');
			  } else {
				  throw new Error(res.message || '删除失败');
			  }
		  } catch (error) {
			  console.error('Delete error:', error);
			  this.$message.error(error.message || '删除失败');
			  throw error;
		  }
	  },
	  
	  // 本地删除
	  deleteLocal(index) {
		  this.markList.splice(index, 1);
		  this.$message.success('删除成功');
	  },
	  // handleCanvasClick(x, y) {
	  // 	let list = this.markList;
	  // 	list.forEach(function (value, index) {
	  // 		const buttonWidth = 60;
	  // 		const buttonHeight = 20;
	  // 		const buttonMargin = 5;
			  
	  // 		const editButtonX = value.x + value.w - buttonWidth - buttonMargin;
	  // 		const editButtonY = value.y + value.h + buttonMargin;
	  // 		const deleteButtonX = editButtonX - buttonWidth - buttonMargin;
	  // 		const deleteButtonY = editButtonY;
	  // 		if (x > editButtonX && x < editButtonX + buttonWidth && y > editButtonY && y < editButtonY + buttonHeight) {
	  // 			alert('编辑按钮被点击');
	  // 			// 执行编辑操作
	  // 		} else if (x > deleteButtonX && x < deleteButtonX + buttonWidth && y > deleteButtonY && y < deleteButtonY + buttonHeight) {
	  // 			list.splice(index, 1);
	  // 			// 执行删除操作
	  // 		}
	  // 	});
	  // },
	  qiehuanquestion(){
		  this.questionnumberishow=!this.questionnumberishow
		  this.startselfQuestionumber=''
		  this.endselfQuestionumber=''
		  this.selfQuestionumber=''
	  },
	  clearInputValue() {
		   this.includedNumbers=''
		   this.screenshotNo=''
		   this.questionRulesId=''
		   this.questiontype = ''
	  }
	},
   beforeDestroy() {
	  // 移除事件监听器
	  document.removeEventListener('customMouseDown',(event)=>{})
	}
  }
  </script>
  <style  scoped>
  .content {
	position: relative;
  }
  .img {
	  position: absolute;
	  top: 0;
	  left: 0;
	  object-fit: contain;
	  z-index: 9;
	}
  
	canvas {
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 10;
	}
	.routate{
		box-sizing: border-box;
		width:260px;
		position:fixed;
		left:20px;
		top:110px;
		background:#fff;
		display: flex;
		align-items: center;
		padding:0 10px;
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
		border-radius:5px;
		font-size:14px;
		color:#557292;
		border-radius: 10px;
	  z-index:111;
	  flex-wrap: wrap;
	  padding:14px;
	}
	.el-select,.el-input{
		width:140px;
	}
   
	.el-select{
		margin-right:10px;
		margin-left:10px;
	}
	.el-input{
		margin-left:10px;
		margin-right:10px;
	}
	 .routate >>> .el-button{
		border-radius:10px;
		height:35px;
		padding:0 10px;
	}
	.routate >>> .el-input__inner{
		border-radius:10px;
		height:35px;
	}
	.routate >>> .el-select{
		margin:0;
		margin-right:14px;
	}
	.questiontypemodel{
		width:220px;
		height:34px;
	}
	 .questiontypemodel >>> .el-input__inner{
		border-radius:10px;
		height:34px;
	}
	.routateboxsetlist{
		width:100%;
		display: flex;
		justify-content: space-between;
	}
	.questionshowhidden{
		display: flex;
		margin-bottom:14px;
		align-items: center;
	}
	.questionshowhidden img{
	   width:14px;
		height:14px;
		margin-top:13px;
		margin-right: 3px;
	}
  .twoinputbox{
	  display: flex;
	  align-items: center;
  }
  .twoinputbox  >>> .el-input{
	  width: 67px;
	  height: 34px;
	  padding:0;
	  margin:0 auto;
  }
	.dangeinput >>> .el-textarea{
		width:150px;
	}
	.dangeinput >>> .el-input__inner{
		width:150px;
		height:100px;
	}
	.twoinputbox >>> .el-input__inner{
		  width: 50px;
		  height: 34px;
		  background:none;
		  border-radius: 10px;
		  padding:0;
		text-align: center;
	 }
	 .routate >>> .el-input__icon{
		  line-height: 34px;	
	 }
  </style>